<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>MyPetStore</title>
    <link rel="StyleSheet" href="../css/common.css" type="text/css" media="screen" />

    <script src="/js/jquery-3.6.0.min.js"></script>
<!--    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>-->
</head>
<body>
<header th:fragment="header">
    <div id="w">
        <div id="Header">
            <div id="Logo">
                <div id="LogoContent">
                    <a href="/index"> <img src="../images/logo-topbar.gif" /></a>
                </div>
            </div>
            <div id="Menu">
                <div id="MenuContent">
                    <a href="/user/cart" th:if="${session.loginUser != null}"><img align="middle" name="img_cart" src="../images/cart.gif" /></a>
                    <img align="middle" th:if="${session.loginUser != null}" src="../images/separator.gif" />
                    <span th:if="${session.loginUser == null}">
                        <a href="/user/loginByNameForm">Sign in</a>
                        <img align="middle" src="../images/separator.gif" />
                    </span>
                    <span th:if="${session.loginUser != null}">
<!--                        <span th:text="${session.loginUser}"></span>-->
                        <a href="/user/signOut">Sign Out</a>
                        <img align="middle" src="../images/separator.gif" />
                        <a href="/user/accountForm">My Account</a>
                        <img align="middle" src="../images/separator.gif" />
                        <a href="/user/order">My order</a>
                        <img align="middle" src="../images/separator.gif" />
                    </span>
                    <a href="/helpForm">Help</a>
                    <img align="middle" src="../images/separator.gif" />

                    <div id="chatContent" th:if="${session.loginUser != null}">
                       <a href="/user/chatForm"><img src="../images/chat.png" /></a>
                    </div>
                </div>
            </div>
        </div>

        <div id="QuickLinks">
            <a class="top-a" th:each="category:${session.categoryList}" th:href="@{/categoryForm(categoryId=${category.catid}) }" th:text="${category.catid} + ' / '">
            </a>

<!--            <a href="/categoryForm?categoryId=FISH"><img src="../images/sm_fish.gif" /></a>-->
<!--            <img src="../images/separator.gif" />-->
<!--            <a href="/categoryForm?categoryId=DOGS"> <img src="../images/sm_dogs.gif" /></a>-->
<!--            <img src="../images/separator.gif" />-->
<!--            <a href="/categoryForm?categoryId=REPTILES"><img src="../images/sm_reptiles.gif" /></a>-->
<!--            <img src="../images/separator.gif" />-->
<!--            <a href="/categoryForm?categoryId=CATS"><img src="../images/sm_cats.gif" /></a>-->
<!--            <img src="../images/separator.gif" />-->
<!--            <a href="/categoryForm?categoryId=BIRDS"><img src="../images/sm_birds.gif" /></a>-->
        </div>

        </div>
    </div>
</header>
</body>
</html>